<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>扑克牌翻牌效果</title>
	<script src="jquery-1.12.3.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 500px;
			height: 500px;
			margin:0 auto;
			perspective: 500px;
			position: relative;
		}
		div img{
			position: absolute;
			top: 0;
			left: 0;
			transform-origin:left center;
			-webkit-transform:rotateY(180deg);
			-moz-transform:rotateY(180deg);
			-ms-transform:rotateY(180deg);
			-o-transform:rotateY(180deg);
			transform: rotateY(180deg);
			transition: all 2s; 
		}
		div .backP{
			opacity: 0;
		}
	</style>
</head>
<body>
	<div>
		<img class="blankP" src="images/pk2.png" alt="">
		<img class="backP" src="images/pk3.jpg" alt="">
	</div>

	<script>
		$(function(){
			$("html,body").mouseenter(function(){
				$("img").css({
					"-webkit-transform":"rotateY(122deg)",
					"-moz-transform":"rotateY(122deg)",
					"-ms-transform":"rotateY(122deg)",
					"-o-transform":"rotateY(122deg)",
					"transform": "rotateY(122deg)",
				})
				$(".blankP").animate({
					"display":"none",
				},1,function(){
					$(".backP").animate({
						"opacity":"1",
					},1)
				})
				
				$("img").css({
					"-webkit-transform":"rotateY(0deg)",
					"-moz-transform":"rotateY(0deg)",
					"-ms-transform":"rotateY(0deg)",
					"-o-transform":"rotateY(0deg)",
					"transform": "rotateY(0deg)",
				})
			})
		})
	</script>
</body>
</html>